<script>
// import axios from "axios";

export default {
  name: "Search",
  data() {
    return {
      msg: "请输入名称进行检索：",
      keyWord: '',
    }
  },
  methods: {
    // 其中兄弟组件传递参数可以使用全局事件总线，发布订阅模式。父组件给子组件传递参数的话，最好的就是props。
    searchUsers() {
      // 请求前更新List的数据
      this.$bus.$emit("updateListData", {
        isFirst: false,
        isLoading: true,
        errMsg: '',
        users: [],
        totalCount: 0,
      })

      // 开始发送axios请求
      this.$http.get(`https://api.github.com/search/users?q=${this.keyWord}`).then((response) => {
        console.log('请求参数keyWord：', this.keyWord, ', 请求成功了，响应结果response：', response.data.items);
        // 请求成功之后更新List的数据。使用全局事件总线，触发自定义事件，前提是安装了全局事件总线。
        this.$bus.$emit('updateListData', {
          users: response.data.items,
          isLoading: false,
          isFirst: false,
          errMsg: '',
          totalCount: response.data.total_count,
        });
      }).catch((error) => {
        console.log('请求失败了');
        // 请求后更新List的数据。使用全局事件总线，触发自定义事件，前提是安装了全局事件总线。
        this.$bus.$emit('updateListData', {
          users: [],
          isLoading: false,
          isFirst: false,
          errMsg: error.message,
          totalCount: 0
        })
      })
    }
  }
}
</script>

<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="keyWord"/>&nbsp;
        <button @click="searchUsers">Search</button>
      </div>
    </section>
  </div>
</template>

<style scoped>

</style>